<template>
	<view class="ve-bottom-box">
		<view class="ve-bottom-box-wrap">
			<slot name="near-top"></slot>
			<view class="ve-bottom-box-wrap-content">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ve-bottom-box",
		data() {
			return {
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ve-bottom-box {
		position: relative;
		height: 220rpx;

		/* iPhoneX底部安全区定义--start */
		&-wrap {

			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;

			&-content {
				position: relative;
				width: 100%;
				padding: 24rpx 32rpx;
				display: flex;
				background: #FFFFFF;
				// box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
				padding-bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);

				::v-deep u-button {
					flex: 1;

					&+u-button {
						width: 400rpx;
						margin-left: 16rpx;
						flex: initial;
					}
				}
			}
		}
	}
</style>
